<template>
    <div class="main-header">
      <div class="header-content">
        <div class="left-content">
          <img src="../assets/logo.png" alt="Logo" class="logo" />
          <h1 class="title">okay-OJ</h1>
          <nav class="nav">
            <button class="nav-button"  @click="goMain()" >
              首页
            </button>
            <button class="nav-button"  @click="goProblemSet()" >
              题目
            </button>
            <button class="nav-button"  @click="goContests()" >
              比赛
            </button>
            <button class="nav-button"  @click="goUser()" >
              设置
            </button>
          </nav>
        </div>
        <div class="right-content">
          <template v-if="userStore.user.token">
            <span class="hello">欢迎，{{userStore.user.username}}</span>
            <button class="nav-button"  @click="loginOut()" >
                  退出登录
            </button>
          </template>
          <template v-else>
            <span class="hello">当前未登录</span>
            <button class="nav-button"  @click="handleLogin()">
               登录/注册
            </button>
          </template>
        </div>
      </div>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { useUserStore } from '../store/user';
const userStore = useUserStore();

const goMain = () => {
    // console.log("点击了某处")
    router.replace("/")
}
const goProblemSet = () => {
    // console.log("点击了某处")
    router.replace("/problemset")
}
const goContests = () => {
    // console.log("点击了某处")
    router.replace("/contests")
}
const goUser = () => {
    // console.log("点击了某处")
    router.replace("/user")
}
const loginOut = () => { 
    console.log("退出登录")
    userStore.clearUser();
}
const handleLogin=()=>{
    console.log("点击登录/注册")
    router.push({name: 'EnterPage'});
}

</script>

<style scoped>
    .main-header {
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 10px 0;
      width: 100%;
      .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        /* width: 100%; */
        .left-content {
          width:50vw;
          justify-content: left;
          display:flex;
          .logo {
            width: 60px;
            height: 50px;
            margin: 3px;
            margin-left: 10px;
            margin-bottom: 10px;
          }
          .title {
            /* justify-content: left; */
            font-family: 'Roboto', sans-serif;
            font-weight: 680;
            color: #333333;
            margin: 0;
            margin-top:10px;
          }
          .nav {
            display: flex;
            gap: 20px;
            margin-left: 30px;
            .nav-button {
              font-family: 'Roboto', sans-serif;
              font-size: 20px;
              font-weight: 500;
              color: #666666;
              background: none;
              border: none;
              cursor: pointer;
              transition: color 0.3s ease;
              :hover {
                color: #2d8cf0;
              }
            }
          }
        }
        .right-content{
          display:flex;
          align-items:center;
          justify-content:right;
          width:50vw;
          gap:10px;
          margin: 10px;
          .hello{
            font-family: 'Roboto', sans-serif;
            font-size: 20px;
            font-weight: 500;
          }
          .nav-button {
              font-family: 'Roboto', sans-serif;
              font-size: 20px;
              font-weight: 500;
              color: #666666;
              background: none;
              border: none;
              cursor: pointer;
              transition: color 0.3s ease;
              :hover {
                color: #2d8cf0;
              }
            }
      }
    }
  }
</style>